<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>房产：{{ house }}</h4>
    <button @click="changeToy">把child1的玩具修改</button>
    <button @click="changeCom">把child2的电脑修改</button>
    <button @click="getAllChild($refs)">所有孩子的书变多</button>
    <Child1 ref="c1" />
    <Child2 ref="c2" />
  </div>
</template>

<script setup lang="ts" name="Father">
import Child1 from "./Child1.vue";
import Child2 from "./Child2.vue";
import { ref, reactive } from "vue";

let house = ref(4);
let c1 = ref();
let c2 = ref();

function changeToy() {
  //c1.value拿到的是组件实例
  c1.value.toy = "小猪佩奇";
}
function changeCom() {
  c2.value.computer = "外星人";
}
function getAllChild(refs: any) {
  for (const index in refs) {
    if (Object.prototype.hasOwnProperty.call(refs, index)) {
      refs[index].book += 3;
    }
  }
}

defineExpose({ house });
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}

.father button {
  margin-bottom: 10px;
  margin-left: 10px;
}
</style>
